'use strict';

import React from "react";
import { Card, Table, Spin, Button, Pagination, Modal } from 'antd';
import { Row, Col } from 'antd';
import New from './NewObj';
import { connect } from 'react-redux';

import {changeFormData, changeFormLoading} from '../actions/NewDataForm';
import {queryLatestData, addOne, deleteOne, getOne} from '../actions/Curd';

const confirm = Modal.confirm;


class CurdTable extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      newVisible: false,
      selectedRowKeys: []
    };
  }



  componentDidMount() {

    const {dispatch, objs, loading, pageSize, total, condition} = this.props;
    dispatch(queryLatestData(condition));
    dispatch(changeFormData(
      {
        email: '',
        password: '',
        username: ''
      }
    ));
  }

  handleNewOnOk(e) {
    const {dispatch} = this.props;
    dispatch(addOne());
    this.setState({newVisible: false});
    dispatch(changeFormData(
      {
        email: '',
        password: '',
        username: ''
      }
    ));
  }
  handleNewOnCancel() {
    const {dispatch} = this.props;
    dispatch(changeFormLoading(false));
    this.setState({newVisible: false});
    dispatch(changeFormData(
      {
        email: {
          value: ''
        },
        password: {
          value: ''
        },
        username: {
          value: ''
        }
      }
    ));
  }

  tableDataChange(pagination, filters, sorter) {
    this.setState({ selectedRowKeys: [] });
    const {dispatch} = this.props;
    let condition = {
      pagination: pagination
    };
    dispatch(queryLatests(condition));

  }

  showAndEdit(id){
    Modal.error({
      title: '失败',
      content: '原则上永远不能够修改或者获取用户资料，您没有超级权限！'
    });
  }

  delete(id){
    const {dispatch} = this.props;

    confirm({
      title: '您是否确认要删除这项内容',
      content: '点确认 1 秒后关闭',
      onOk() {
        return new Promise((resolve) => {
          dispatch(delete(id));
          setTimeout(resolve, 1000);
        });
      },
      onCancel() {},
    });

  }

  onSelectChange(selectedRowKeys) {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  getCheckboxProps(record){
    console.log(record);
    return {
      disabled: record.username === 'simontaosim',    // 配置无法勾选的列
    }
  }


  render() {
    let columns = [
      {
        title: '操作',
        dataIndex: 'opera',
        key: 'opera',
        render: (text, record) => (
          <span>
          <a onClick={this.showAndEdit.bind(this, record.id, record.key)}>查看详细/编辑</a>
            &nbsp;|&nbsp;
            <a onClick={this.delete.bind(this, record.id, record.key)}>删除</a>
        </span>
        )
      }];

    columns.push(this.props.columnData);

    console.log(columns);



    let selectedRowKeys = this.state.selectedRowKeys;

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange.bind(this)
    };
    const {dispatch, objs, loading, pageSize, total, condition} = this.props;
    return(

      <div>
        <Row type="flex" justify="center" align="middle" style={{  height: "100%", textAlign: "center" }}>
          <Col span={4}>
            <Button  type="primary" onClick={()=> this.setState({newVisible: true}) }>新增用户</Button>
            <New visible={this.state.newVisible} onOk={this.handleNewOnOk.bind(this)}
                     onCancel={this.handleNewOnCancel.bind(this)}/>
          </Col>
          <Col span={20}>

          </Col>

        </Row>
        <Row type="flex" justify="center" align="middle" style={{ height: "100%", textAlign: "center" }}>

          <Col span={24}>
            <Table dataSource={this.props.objs}  rowSelection={rowSelection}
                   columns={ columns } loading={this.props.loading}
                   onChange={this.tableDataChange.bind(this)} pagination={this.props.condition.pagination}
            />
          </Col>
        </Row>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    newDataForm: state.curd.newDataForm,
    newDataFormloading: state.curd.newDataFormloading,
    data: state.curds.data,
    loading: state.curds.loading,
    pageSize: state.curds.pageSize,
    total: state.curds.total,
    condition: state.condition,
    column: state.curd.columnData,
    table: state.curd.table
  };
}

export default connect(mapStateToProps)(CurdTable);
